import React, { useCallback, useEffect, useState } from 'react';

import Text from 'components/Text';
import { TEXT_TAG, TEXT_VIEW } from 'components/Text/Text.types';
import { classnames } from 'utils';

import classes from './Input.module.scss';

export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> & {
    /** Значение поля */
    value: string;
    /** Callback, вызываемый при вводе данных в поле */
    onChange: (value: string) => void;
    /** Слот для иконки справа */
    afterSlot?: React.ReactNode;
};

const cnInput = classnames(classes, 'input');

const Input = React.forwardRef<HTMLInputElement, InputProps>(
    ({ afterSlot, className, value, onChange, ...props }, ref) => {
        const [inputValue, setInputValue] = useState(value);

        useEffect(() => setInputValue(value), [value]);

        const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
            setInputValue(e.target.value);
            onChange(e.target.value);
        }, []);
        return (
            <Text tag={TEXT_TAG.div} view={TEXT_VIEW.p16} className={cnInput('container') + ` ${className}`}>
                <input
                    {...props}
                    ref={ref}
                    type="text"
                    value={inputValue}
                    onChange={handleOnChange}
                    className={cnInput()}
                />
                {afterSlot}
            </Text>
        );
    },
);

export default Input;
